<template>

  <div class="box-one">
    <ul class="box-one-left">
      <!-- 这是box-one中左边的部分 -->
      <li class="box-one-left-title"><h2>市场</h2></li>
      <li>大西豪</li>
      <li>国大</li>
      <li>泓发</li>
      <li>鸿胜</li>
      <li>大时代</li>
      <li>女人街</li>
      <li>国投</li>
      <li>金富丽</li>
      <li>国泰</li>
      <li>宝华</li>
      <li>柏美</li>
      <li>国润</li>
      <li>跨客城</li>
      <li>三晟</li>
      <li>新潮都</li>
      <li>非凡</li>
      <li>东街</li>
      <li>佰润</li>
      <li>新金马</li>
      <li>大利广场</li>
      <li>拼商城</li>
    </ul>
    <ul class="box-one-right">
      <li class="box-one-right-box" v-for="(item ,index) of imgUrl" :key="index+'box-one-right-box'">
        <img :src="item" alt="" width="100%" height="100%">
      </li>
    </ul>
    <div  class="box-one-showBox">
      <img src="/static/BoxOne/BoxOne_bottom.jpg" alt="" width="100%" height="100%">
    </div>
  </div>
  

  
</template>

<script>
import { setTimeout, clearInterval } from 'timers';
export default {
  name: 'BoxOne',
  data(){
    return{
      "siperTimer": '',
      "imgUrl": ["/static/BoxOne/BoxOne_1.jpg","/static/BoxOne/BoxOne_2.jpg","/static/BoxOne/BoxOne_3.jpg","/static/BoxOne/BoxOne_4.jpg","/static/BoxOne/BoxOne_5.jpg"],
      "imgurlList": [
        ["/static/BoxOne/BoxOne_1.jpg","/static/BoxOne/BoxOne_2.jpg","/static/BoxOne/BoxOne_3.jpg","/static/BoxOne/BoxOne_4.jpg","/static/BoxOne/BoxOne_5.jpg"],
        ["/static/BoxOne/BoxOne_6.jpg","/static/BoxOne/BoxOne_7.jpg","/static/BoxOne/BoxOne_8.jpg","/static/BoxOne/BoxOne_9.jpg","/static/BoxOne/BoxOne_10.jpg"]
      ]
    }
  },
  mounted(){
    clearInterval(this.siperTimer);
    const $Li = $(".box-one-right>li");
    let $Li_rote = false;
    this.siperTimer = setInterval(() => {
      $Li_rote = !$Li_rote;
      $Li.css({
        "transform": `rotateY(${$Li_rote*360}deg)`,
      })
      this.imgUrl = this.imgurlList[$Li_rote*1];
    },5000)
  }
}
</script>
<style lang="stylus" scoped>
    .box-one
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-content: space-between;
      position: absolute;
      margin: 0 auto;
      top: 376px;
      left: 0;
      right: 0;
      width: 1192px;
      height: 322px;
      //左边部分开始
      .box-one-left
        box-sizing: border-box;
        padding: 0 14px;
        width: 192px;
        height: 240px;
        background: #fff;
        border-top: 1px solid #f60;
        .box-one-left-title
          width: 100% !important;
          height: 30px;
        .box-one-left-title>h2
          font-size: 14px;
      .box-one-left>li
        float: left;
        width: 33.3%;
        height: 25px;
        font-size: 12px;
        line-height: 25px;
        text-align: left;
        cursor: pointer;
      .box-one-left>li:hover
        color: #f96388;
      //左边部分结束
      .box-one-right
        display: flex;
        transform-style: preserve-3d;
        flex-flow: row wrap;
        justify-content: space-between;
        width: 990px;
        height: 240px;
        .box-one-right-box
          width: 184px;
          height: 100%;
          transform: rotateY(0);
          transition: .5s;
      .box-one-showBox
        width: 1192px;
        height: 60px;
        background: blue;
      .box-one-right>li:nth-child(4)
        width: 200px;
      .box-one-right>li:nth-child(5)
        width: 200px;
    
</style>
